<template>
  <div class="Model">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup lang="ts">
import type SYModelClass from "@/utils/initModel"
import SYThreeClass from "@/utils/initModel"

import { onBeforeUnmount, onMounted, ref } from "vue"

interface IProps {
  modelId: number
}

const props = withDefaults(defineProps<IProps>(), {})

const canvasRef = ref<HTMLElement>()

let model: SYModelClass | null = null

onMounted(() => {
  if (canvasRef.value) {
    model = new SYThreeClass(canvasRef.value)
    model.init()
    model
      .loadModel(`/model/${props.modelId}.glb`)
      .then(() => {
        console.log("Model loaded")
      })
      .catch((error) => {
        console.error("Error loading model:", error)
      })
  }
})

onBeforeUnmount(() => {
  model && model.destroy()
})
</script>

<style lang="less" scoped>
canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>
